<!--  -->
<template>
<div class='login'>
    <div class="header">
        <img src="@/assets/image/logo.png" alt=""/>
    </div>
    <div class="form">
        <div class="form-item">
            <input type="text" placeholder="用户名" v-model="user_name"/>
        </div>
        <div class="form-item">
            <input type="password" placeholder="密码" v-model="user_password"/>
        </div>
         <div class="form-item">
           <button @click="loginRequestApi">登录按钮</button>
        </div>
        <div class="form-check">
            <router-link to="phonelogin">短信登录</router-link>
            <router-link to="adduser" style="float:right">新用户登录</router-link>

        </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

// 引入Api方法
// import { UserLoginApi } from "@/api/index";

export default {
//import引入的组件需要注入到components对象中才能使用
components: {},
data() {
//这里存放数据
    return {
        user_name:"",
        user_password:""
};
},

methods: {
async loginRequestApi(){
 await this.$store.dispatch("actchangeIsLogin",{
        user_name:this.user_name,
        user_password:this.user_password
    });
        this.$router.push("/home")
}
},
}
</script>
<style lang="less">
.login{
    .header{
        display: flex;
        justify-content: center;
        img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border:1px solid #ccc;
        }
    }
    .form{
        width: 100%;
        height: 50rem;
        margin-left: 1rem;
        width: calc(100% - 4rem);  //减号两边必须空格
        .form-item{
            margin: 1rem 0;
            input{
                width: 100%;
                height: 3.6rem;
                border:1px solid #ccc;
                text-indent: 1rem;
            }
            button{
                width: 100%;
                height: 3.6rem;
                background: #f55;
            }
        }
    }
}

</style>